<template>
  <div v-if="system" class="system-architecture-page-wrapper">
    <div :style="{ display: 'flex', height: '100%' }">
      <el-card shadow="never" :style="{ flexBasis: '300px' }" :body-style="{ padding: '5px' }">
        <div :style="{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '5px' }">
          <div :style="{ marginLeft: '7px' }">当前架构</div>
          <el-button size="small" text bg>+</el-button>
        </div>
        <el-tree :data="documents">
          <template #default="{ data }">
            <div :style="{ display: 'flex', alignItems: 'center' }">
              <el-icon>
                <Tools v-if="data.type == 'TECHNICAL_ARCHITECTURE'" />
                <Setting v-if="data.type == 'LOGIC_ARCHITECTURE'" />
                <List v-else-if="data.type == 'SOFTWARE_LIST'" />
                <Location v-else-if="data.type == 'DEPLOY_ARCHITECTURE'" />
                <Checked v-else-if="data.type == 'DEPLOY_LIST'" />
              </el-icon>
              <div :style="{ marginLeft: '5px' }">{{ data.label }}</div>
            </div>
          </template>
        </el-tree>
      </el-card>
      <el-card shadow="never" :style="{ marginLeft: '10px', width: '100%' }">Never</el-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useSystemService } from '@/service/system-service';
import { System } from '@/store/system-repository';
import { Setting, List, Location, Checked, Tools } from '@element-plus/icons-vue';

const route = useRoute();
const systemService = useSystemService();

interface Tree {
  id: string;
  type: string;
  label: string;
  children?: Tree[];
}

const documents: Tree[] = [
  {
    id: '1',
    type: 'TECHNICAL_ARCHITECTURE',
    label: '工作流平台技术架构',
    children: [
      {
        id: '1.1',
        type: 'LOGIC_ARCHITECTURE',
        label: '逻辑架构图',
      },
      {
        id: '1.2',
        type: 'SOFTWARE_LIST',
        label: '软件清单表',
      },
      {
        id: '1.3',
        type: 'DEPLOY_ARCHITECTURE',
        label: '部署架构图',
      },
      {
        id: '1.4',
        type: 'DEPLOY_LIST',
        label: '部署清单表',
      },
    ],
  },
];

const system = ref<System>();
watch(
  () => {
    return route.params.systemId as string | undefined;
  },
  newSystemId => {
    if (newSystemId) {
      systemService.system(newSystemId).then(data => {
        system.value = data;
      });
    }
  },
  { immediate: true },
);
</script>

<style lang="less" scoped>
.system-architecture-page-wrapper {
  height: 100%;
}
</style>
